<template>
  <div>
    <div class="title">自定义按钮</div>
    <hd-button :content="btContent" type="success" style="margin-right:10px;" />
    <hd-button hd-tip="@" content="删除" type="danger" style="margin-right:10px;" />
    <hd-button content="反馈" style="margin-right:10px;" />
    <hd-button content="编辑" disabled="true" style="margin-right:10px;" />
    <hd-button content="验证" type="636" style="margin-right:10px;" />
    <hd-button  v-bind="{content:'保存',type:'success'}" style="margin-left:20px;" />

    <hr>
    <div class="title">单向数据流</div>
    <one-direction-flow :content="oneDirection" :contentObject="oneDirectionObject" />
    <hr>
    <button @click="oneDirection = '父组件'">父组件按钮</button><span>{{oneDirection}}</span>
    <hr>
    <button @click="oneDirectionObject.text = '引用类型父组件'">引用类型父组件按钮</button><span>{{oneDirectionObject}}</span>

    <hr>
    <div class="title">响应式数据</div>
    <button @click="reactData='父组件的数据变了'">响应式数据按钮</button><span>{{reactData}}</span>
    <hr>
    <react-data :content="reactData" />

    <hr>
    <div class="title">非props属性</div>
    <not-props-attrs id="abc" class="def" :hd="show" />
  </div>
  
</template>

<script>
  import hdButton from './components/Button.vue'
  import oneDirectionFlow from './components/OneDirectionFlow.vue'
  import reactData from './components/ReactData.vue'
  import notPropsAttrs from './components/NotPropsAttrs.vue'
  export default {
    components:{ hdButton, oneDirectionFlow, reactData, notPropsAttrs },
    data(){
      return{
        btContent:"保存提交",
        oneDirection:"单向数据流",
        oneDirectionObject:{text:"单向数据流"},
        reactData:"响应式数据"
      }
    },
    methods:{
      show(){
        alert("事件传递");
      }
    }
  }
</script>

<style>
    .title{
      font-weight: bold;
    }
</style>
